<template>
  <div class="conter">
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        :collapse-transition="false"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/homePage">网站首页</el-menu-item>
        <el-submenu index="/general" class="mySubMenu1">
          <template slot="title">林区概况</template>
          <el-menu-item index="/general">林区概况</el-menu-item>
          <el-menu-item index="/forestInformation">林区资讯</el-menu-item>
          <el-menu-item index="/forestAudio">林区影音</el-menu-item>
          <el-menu-item index="/lqxxInfo">林区信息</el-menu-item>
          <el-menu-item index="/jcfw">基础服务</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index="/general" >林区概况</el-menu-item> -->
        <!-- <el-menu-item index="/district" >醉美林区</el-menu-item> -->
        <el-submenu index="/landmarkspot" class="mySubMenu1">
          <template slot="title">醉美林区</template>
          <el-menu-item index="/landmarkspot">标志景点</el-menu-item>
          <el-menu-item index="/experiencetheme">体验主题</el-menu-item>
          <el-menu-item index="/culturalforestarea">文化林区</el-menu-item>
          <el-menu-item index="/ecologicalforestarea">生态林区</el-menu-item>
        </el-submenu>
        <el-menu-item index="/eventGala">活动盛典</el-menu-item>
        <!-- <el-menu-item index="/ticketReservation" >票务预订</el-menu-item> -->
        <el-submenu index="/ticketReservation" class="mySubMenu">
          <template slot="title"><div>在线预订</div></template>
          <!--          <el-menu-item index="/ticketReservation">餐饮预订</el-menu-item>-->
          <el-menu-item index="/ticketReservation">酒店预订</el-menu-item>
          <el-menu-item index="/ticketReservation">票务预订</el-menu-item>
          <!--          <el-menu-item index="/ticketReservation">露营预订</el-menu-item>-->
          <!--          <el-menu-item index="/ticketReservation">拓展预订</el-menu-item>-->
          <!--          <el-menu-item index="/ticketReservation">其他</el-menu-item>-->
        </el-submenu>
        <el-menu-item index="/notice">通知公告</el-menu-item>
      </el-menu>
    </div>
    <!-- <el-carousel class="model1" :interval="5000" arrow="always" height="600px;">
      <el-carousel-item v-for="(item,index) in header" :key="index" class="sywz" >
      <img class="imdt" :src="item.url" />
        <p class="medium1" >{{item.name}}</p>
        <h3 class="medium" >{{item.con}}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <div class="moddel">
      <router-view />
    </div>
    <div class="bottom">
      <div class="sy">
        <div class="gzlx">
          <div
            class="jtlx"
            v-for="(item, index) in list"
            :key="index"
            @click="gywm(item)"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="rwm">
          <img
            src="../assets/image/1wei.png"
            style="width: 170px; height: 170px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { service } from "@/request";
export default {
  data() {
    return {
      header: {},
      activeIndex: "/homePage",
      list: [
        {
          name: "首页",
        },
        {
          name: "景区",
        },
        {
          name: "攻略",
        },
        {
          name: "美食",
        },
        {
          name: "住宿",
        },
        {
          name: "交通",
        },
        {
          name: "预订中心",
        },
        {
          name: "关于我们",
        },
      ],
    };
  },
  created() {
    this.Carousel();
  },
  mounted() {
    this.Carousel();
  },
  methods: {
    pageTo(type) {
      if (type === 1) {
      }
    },
    gywm(item) {
      if (item.name == "关于我们") {
        this.$router.push({
          path: "/gywm",
          query: {
            name: item.name,
          },
        });
      } else if (item.name == "交通") {
        this.$router.push({
          path: "/jiaot",
          query: {
            name: item.name,
          },
        });
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
      this.$router.push(key); // 跳转到对应的路由
    },
    // 轮播图
    Carousel() {
      service({
        url: "/api/carousel",
        method: "post",
        data: {},
      }).then((data) => {
        if (data.code == 200) {
          this.header = data.data;
        }
      });
    },
  },
};
</script>
<style scoped>
.conter {
  position: relative;
  width: 100%;
}

/deep/ .el-menu--horizontal .el-submenu__title:hover {
  background-color: red;
}
.nameSty {
  position: absolute;
  left: 5rem;
  bottom: 10rem;
  font-size: 50px;
  color: white;
  /* text-decoration-line: underline; */
  font-weight: 900;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 48px;
  line-height: 100%;
  display: flex;
  align-items: center;
  flex: none;
  order: 1;
  align-self: stretch;
}
/deep/ .el-carousel__container {
  position: relative;
  height: 600px;
}
.imdt {
  width: 100%;
  height: 100%;
}
.medium {
  position: absolute;
  left: 5rem;
  bottom: 10rem;
  font-size: 50px;
  color: white;
  /* text-decoration-line: underline; */
  font-weight: 900;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 48px;
  line-height: 100%;
  display: flex;
  align-items: center;
  flex: none;
  order: 1;
  align-self: stretch;
}
.medium1 {
  position: absolute;
  left: 5rem;
  bottom: 15rem;
  font-size: 50px;
  color: white;
  /* text-decoration-line: underline; */
  font-weight: 900;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 48px;
  line-height: 100%;
  display: flex;
  align-items: center;
  flex: none;
  order: 1;
  align-self: stretch;
}
.model1 {
  width: 99.9%;
  height: 600px;
  background: url("../assets/image/dpm1.png") no-repeat;
  background-size: 100% 100%;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  z-index: 999;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

/deep/ .el-menu--horizontal > .el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #f9fafb;
}
/deep/ .el-menu.el-menu--horizontal {
  border-bottom: solid 0px #e6e6e6;
}
/deep/ .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}
/deep/ .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: #fff !important;
}
/deep/ .el-menu--horizontal > .el-submenu:focus.el-submenu__title,
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  color: #19191a !important;
}
/deep/ .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0px solid #409eff;
  color: #fff;
}
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 0px solid #409eff;
  color: #fff;
}
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}
/deep/ .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}
/deep/ .el-menu--horizontal > .el-submenu:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
}
/deep/ .el-submenu__title i {
  color: #909399;
  display: none;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background-color: #043c1f;
  background: rgba(0, 0, 0, 0.73) !important;
  float: none;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  color: #ffffff;
}
/deep/ .el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #ffffff;
}

.moddel {
}
.bottom {
  width: 100%;
  height: 375px;
  /* position: absolute; */
  /* left: 0; */
  /* bottom: 0; */
  background: #1f1f1f;
  display: flex;
  justify-content: center;
}
.sy {
  width: 70%;
  height: 100px;
}
.gzlx {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.jtlx {
  padding: 10px 20px;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
.bah {
  color: #fff;
  font-size: 14px;
  margin-left: 20px;
  margin-top: 40px;
  display: inline-block;
}
.rwm {
  margin-top: 45px;
  text-align: center;
}
/deep/ .el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #fff;
}

/deep/ .el-menu--horizontal .el-menu-item:not(.is-disabled) :focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: #000;
}
</style>
<style>
.el-menu {
  list-style: none !important;
  position: relative !important;
  margin: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-width: 96px !important;
  background: transparent !important;
  color: #fff !important;
}
.el-menu--popup {
  z-index: 100 !important;
  min-width: 96px !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  margin-top: 0px !important;
  text-align: center;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #fff;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #fff !important;
}
</style>
